<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap</title>
  <link href="../lib/css/bootstrap.min.css" rel="stylesheet">

</head>
<body>
<div class="container">
  <h1>分页</h1>
  <h3>默认分页</h3>
  <nav aria-label="Page navigation">
    <ul class="pagination">
      <li>
        <a href="#" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li>
        <a href="#" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </nav>
  <h3>禁用(disabled)和激活(active)状态</h3>
  <nav aria-label="Page navigation">
    <ul class="pagination">
      <li class="disabled">
        <a href="#" aria-label="Previous">
          <span aria-hidden="true">&laquo;</span>
        </a>
      </li>
      <li class="active"><a href="">1</a></li>
      <li><a href="">2</a></li>
      <li><a href="">3</a></li>
      <li><a href="">4</a></li>
      <li><a href="">5</a></li>
      <li>
        <a href="#" aria-label="Next">
          <span aria-hidden="true">&raquo;</span>
        </a>
      </li>
    </ul>
  </nav>
  <h3>尺寸.pagination-lg 或 .pagination-sm</h3>
  <nav aria-label="Page navigation ">
    <ul class="pagination pagination-lg">
      <li><a href="" aria-label="Previous"><span aria-hidden="true"><</span></a></li>
      <li><a href="">1</a></li>
      <li><a href="">2</a></li>
      <li><a href="">3</a></li>
      <li><a href="">4</a></li>
      <li><a href="" aria-label="Next"><span aria-hidden="true">></span></a></li>
    </ul>
  </nav>
  <h1>翻页</h1>
  <h3>默认翻页</h3>
  <nav aria-label="...">
    <ul class="pager">
      <li><a href="">Previous</a></li>
      <li><a href="">Next</a></li>
    </ul>
  </nav>
  <h3>对齐链接</h3>
  <nav aria-label="...">
    <ul class="pager">
      <li class="previous">
        <a href="">
          Older
          <span aria-hidden="true">&larr;</span>
        </a>
      </li>
      <li class="next">
        <a href="#">
          Newer
          <span aria-hidden="true">&rarr;</span>
        </a>
      </li>
    </ul>
  </nav>
  <h3>可选的禁用状态disabled </h3>
  <nav aria-label="...">
    <ul class="pager">
      <li class="previous disabled">
        <a href="">
          Older
          <span aria-hidden="true">&larr;</span>
        </a>
      </li>
      <li class="next">
        <a href="#">
          Newer
          <span aria-hidden="true">&rarr;</span>
        </a>
      </li>
    </ul>
  </nav>
</div>
<script src="../lib/jquery.min.js"></script>
<script src="../lib/bootstrap.min.js"></script>
</body>
</html>